<template>
    <div class="test2">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="管理博客" name="first">
                <managerPage></managerPage>
            </el-tab-pane>
            <el-tab-pane label="写博客" name="second">
                <div class="editor-wrap">
                    <div class="editor">
                        <el-input type="text" class="title" placeholder="输入标题" v-model="title">输入标题</el-input>
                        <markdown-editor
                                v-model="content"
                                ref="markdownEditor"
                                :autoinit="false"></markdown-editor>
                        <el-input type="test" style="width:200px" v-model="label"></el-input>
                        <el-button @click="LabelClick">添加</el-button>
                        <div class="label" style="min-height:100px"></div>
                        <el-button @click="submitBtn">提交</el-button>
                        <el-button>重置</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="草稿箱" name="third"></el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import markdownEditor from 'vue-simplemde/src/markdown-editor'
    import managerPage from '../views/manager.vue'

    export default {
        name: 'test2',
        data() {
            return {
                activeName: 'first',
                label: '',
                id: '0',
                title: '',
                labelArr: [],
                content: '``` \nconsole.log("lalala") \n```',
                configs: {
                    status: false,
                    toolbar: ['image'],
                },
                output: '',
                type: 'markdown',
            };
        },
        components: {
            markdownEditor,
            managerPage
        },
        computed: {
//            simplemde() {
//                return this.$refs.markdownEditor.simplemde;
//            },
        },
        mounted() {
            this.$nextTick(() => {
                this.$refs.markdownEditor.initialize();
            })
        },
        methods: {
            handleClick(tab, event) {
                if (tab.name == 'first') {
                    this.$help.$emit('getList');
                } else if (tab.name == 'second') {
                    this.$help.$emit('new')
                }
            },
            submitBtn() {
                var that = this;
                sessionStorage.setItem('id', this.id);
                this.id = parseInt(this.id)+1;
                this.$ajax.post('http://127.0.0.1:3000/set_note', this.$qs.stringify({
                    id: that.id,
                    title: that.title,
                    html:'blogs',
                    md: that.content,
                    tag: (that.labelArr).join()
                })).then(res => {
                        if (res.data.code == 1) {
                            that.activeName = 'first';
                            this.$help.$emit('getList');
                        }
                    }
                )
            },
            LabelClick() {
                var label = document.querySelector('.label');
                var children = document.createElement('button');
                children.classList.add('labelDIV');
                children.style.background = 'skyblue';
                children.style.margin = 10 + 'px';
                children.style.padding = 10 + 'px';
                children.style.border = '1px solid red';
                children.style.borderRadius = '10px';
                children.innerText = this.label;
                this.labelArr.push(this.label);
                label.appendChild(children);
                this.label = "";
            }
        },
    };
</script>
<style lang="scss">
    @import '~simplemde/dist/simplemde.min.css';
    @import '~highlight.js/styles/atom-one-dark.css';
    @import '~github-markdown-css';

    body {
        margin: 0;
        padding: 0;
    }

    .button-wrap {
        padding: 20px;
    }

    .editor-wrap {
        width: 100%;
        max-width: 900px;
        padding: 0 10px;
        float: left;
    }

    .editor {
        padding: 10px;
        box-sizing: border-box;
    }

    .el-tabs__nav {
        float: right;
        margin-right: 20px;
    }

    .title {
        text-align: center;
    }

    .markdown-editor .CodeMirror {
        height: 200px;
    }

    /*修改代码块背景色及字体颜色*/
    .theme .editor-preview-side pre, .theme .editor-preview pre {
        color: #abb2bf !important;
        background: #282c34 !important;
    }
</style>